<template>
    <div class="spu">
        <Category :scene="scene" />

        <el-button type="primary" icon="plus" @click="handleAddSpu" :disabled="!categoryStore.c3Id">
            添加SPU
        </el-button>

        <div v-if="scene === 0">
            <el-table class="table" border :data="records">
                <el-table-column label="序号" type="index" width="80px" />
                <el-table-column label="SPU名称" prop="spuName" />
                <el-table-column label="SPU描述" prop="description" />
                <el-table-column label="SPU操作">
                    <el-button type="primary" size="small" icon="Plus" title="添加SPU"></el-button>
                    <el-button type="primary" size="small" icon="Edit" title="修改SPU"></el-button>
                    <el-button
                        type="primary"
                        size="small"
                        icon="View"
                        title="查看SKU列表"
                    ></el-button>
                    <el-button type="danger" size="small" icon="Delete" title="删除SPU"></el-button>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                v-model:current-page="page"
                v-model:page-size="size"
                :page-sizes="[3, 5, 7, 9]"
                layout="prev, pager, next, jumper,->,sizes,total"
                :total="total"
                @current-change="getHasSpu"
            />
        </div>

        <div v-if="scene === 1">aa</div>
    </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { reqHasSpu } from '@/api/product/spu'
import { useCategoryStore } from '@/store/modules/category'
const scene = ref(0)

const page = ref<number>(1)
const size = ref<number>(3)

const records = ref([])
const total = ref<number>(0)

const categoryStore = useCategoryStore()

const handleAddSpu = () => {
    scene.value = 1
}

watch(
    () => categoryStore.c3Id,
    () => {
        records.value = []
        if (!categoryStore.c3Id) {
            return
        }
        getHasSpu()
    },
)

const getHasSpu = async (p: number = 1) => {
    page.value = p
    let result: any = await reqHasSpu(page.value, size.value, categoryStore.c3Id)
    if (result.code === 200) {
        records.value = result.data.records
        total.value = result.data.total
    }
}
</script>

<style lang="scss" scoped>
.spu {
    .category {
        margin-bottom: 20px;
        border-bottom: 1px solid #e4e7ed;
    }

    .table {
        margin: 10px 0;
    }
}
</style>
